<template>
  <div>

    <div class="btnBox">
      <el-button type="primary" size="small" @click="handleAdd()">增加</el-button>
    </div>

    <el-table :data="tableData" border style="width: 95%" class="table" :height="getHeight()" >
      <el-table-column fixed type="index" label="序号" width="80" align="center">
      </el-table-column>
      <el-table-column prop="pic_url" label="轮播图" width="230" align="center">
        <template slot-scope="{row}">
          <img :src="row.pic_url" alt="" style="width: 100px;">
        </template>
      </el-table-column>
      <el-table-column prop="link" label="跳转链接" width="500" align="center">
      </el-table-column>
      <el-table-column prop="sort" label="排序值" width="120" align="center">
      </el-table-column>
      <el-table-column prop="created_at" label="添加时间" width="300" align="center">
      </el-table-column>
      <el-table-column prop="updated_at" label="更新时间" width="300" align="center">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200" align="center">
        <template slot-scope="scope">

          <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="handleDel(scope.row)" style="color: red;">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageno"
      :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>

    <el-dialog :title="title1" :visible.sync="dialogFormVisible" @close="clearForm()">
      <el-form :model="form" ref="ruleForm" :rules="rules" label-width='80px'>
        <el-form-item label="轮播图" prop="pic_url">
          <el-input v-model="form.pic_url" placeholder="请输入轮播图地址"></el-input>
        </el-form-item>
        <el-form-item label="跳转链接">
          <el-input v-model="form.link" placeholder="跳转链接"></el-input>
        </el-form-item>
        <el-form-item label="排序值">
          <el-input v-model="form.sort" placeholder="排序值"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false;onSubmit()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
  
<script>
import { getBannerInfo, addBanner, editBanner, delBanner } from '@/api/home';
export default {
  name: 'bannerSwiper',
  data() {
    return {
      title1: '',
      tableData: [],
      pageSize: 10,
      total: 0,
      pageno: 1,
      dialogFormVisible: false,
      form: {},
      rules: {
        pic_url: [
          { required: true, message: '请输入轮播图地址', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getBannerList()
  },
  methods: {
    getBannerList() {
      getBannerInfo({
        page: this.pageno,
        limit: this.pageSize

      }).then((res) => {
       // console.log(res)
        if (res.code === 1) {
          this.total = res.data.count;
          this.tableData = res.data.list
        }
      })
    },
    //改变每页多少条
    handleSizeChange(val) {
      this.pageSize = val
      this.getBannerList()
    },
    //改变当前页
    handleCurrentChange(val) {
      this.pageno = val
      this.getBannerList()
    },
    //获取表格高度
    getHeight() {
      return window.innerHeight - 240
    },

    //打开增加轮播图对话框
    handleAdd() {
      this.dialogFormVisible = true
      this.title1 = '添加轮播图'
    },
    handleEdit(row) {
      this.dialogFormVisible = true
      this.title1 = '编辑轮播图'
      this.form = { ...row }
      //console.log(this.form)
    },
    //添加轮播图
    addSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          addBanner(this.form).then((res) => {
            if (res.code === 1) {
              this.$message.success('添加成功')
              this.getBannerList()
            }
          })
        }
      })
    },
    //编辑轮播图
    editSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          editBanner(this.form).then((res) => {
            if (res.code === 1) {
              this.$message.success('编辑成功')
              this.getBannerList()
            }
          })
        }
      })
    },
    //判断是添加还是编辑
    onSubmit() {
      if (this.title1 == '编辑轮播图') {
        this.editSubmit()

      } else {
        this.addSubmit()
      }
    },

    //当对话框关闭时清空表单数据
    clearForm() {
      this.form = {}
    },

    //删除
    handleDel(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        
        delBanner(row).then((res) => {
          if (res.code === 1) {
            this.$message.success('删除成功')
            this.getBannerList()
           
          }
        },
        (err)=>{
          console.log(err)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });



    }


  }
}
</script>  
  
<style scoped>
.btnBox {
  padding: 20px;
  border-bottom: 1px solid #ccc;
}

.table {
  margin: 20px;
}
</style>
  